<template>
    <div style="width: 100%" v-show="show">
        <el-collapse v-model="activeName">
            <el-collapse-item title="实现的接口" name="1">
                <avue-crud :option="option"
                           :table-loading="loading"
                           :data="tableList"
                           @selection-change="v=>selection=v"
                           ref="crud">
                    <template slot="menuLeft">
                        <el-button size="medium" :disabled="dialogType()==='view'" type="primary"
                                   @click="$refs['gdcd'].open(tableList)">选择
                        </el-button>
                        <el-button size="medium" :disabled="dialogType()==='view'" @click="remove">移除</el-button>
                    </template>

                    <template slot-scope="{row}" slot="attributes">
                        {{ interfaceAttribute(row) }}
                    </template>
                </avue-crud>
            </el-collapse-item>
            <el-collapse-item title="继承的接口" name="2">
                <avue-crud :option="opt(option)"
                           :table-loading="loading"
                           :data="data"
                           ref="crud">
                </avue-crud>
            </el-collapse-item>
        </el-collapse>
        <get-data-common-dialog title="选择功能"
                                ref="gdcd"
                                :param="{type:1}"
                                url="/api/manager-api/mx-interface/page"
                                :column="EntityInterfaceOption.column"
                                @addToList="addToList">
        </get-data-common-dialog>
    </div>
</template>

<script>
import MsEditTable from "@/components/ms-edit-table.vue";

import * as common from "@/api/common"
import GetDataCommonDialog from "@/views/DMDComponent/getDataCommonDialog.vue";

export default {
    name: "Interface",
    components: {GetDataCommonDialog, MsEditTable},
    inject: ["parentIdList", "allFormData", "EntityInterfaceOption", "temp", "dialogType"],
    props: {
        show: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    },
    data() {
        return {
            data: [{name: "测试"}],
            activeName: ["1", "2"],
            loading: false,
            option: {
                height: '300px',
                calcHeight: 30,
                dialogWidth: 900,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                labelWidth: 120,
                // menuWidth: 200,
                viewBtn: false,
                dialogClickModal: false,
                tabs: true,
                delBtn: false,
                addBtn: false,
                editBtn: false,
                refreshBtn: false,
                columnBtn: false,
                align: "center",
                menu: false,
                column: [
                    {
                        label: "中文名称",
                        prop: "nameCn",
                        cell: true,
                    },
                    {
                        label: '英文名称',
                        prop: 'nameEn',
                        cell: true,
                    },
                    {
                        label: "中文描述",
                        prop: "describeCn",
                        cell: true,
                    },
                    {
                        label: "英文描述",
                        prop: "describeEn",
                        cell: true,
                    },
                    {
                        label: "接口类型",
                        prop: "type",
                        cell: true,
                        type: "select",
                        dicData: [
                            {label: "业务接口", value: 1},
                            {label: "功能接口", value: 2},
                        ]
                    },
                    {
                        label: "接口属性",
                        prop: "attributes",
                        cell: true,
                    },
                ],
                afterColumn: [{
                    label: "继承类型",
                    prop: "parentName",
                }]
            },

            tableList: [],
            selection: [],
        }
    },
    methods: {
        interfaceAttribute(row) {
            console.log(row)
            if (row.extAttributes && row.extAttributes.length > 0) {
                return row.extAttributes.map(i => i.name).join("，");
            }
            return "";
        },

        remove() {
            let data = this.deepCopy(this.selection).map(item => item.oid);
            let properties = this.deepCopy(this.tableList);
            this.tableList = [];
            properties.forEach(item => {
                if (!data.includes(item.oid)) {
                    this.tableList.push(item);
                }
            })
        },
        addToList(list) {
            this.tableList = list;
            this.$refs["gdcd"].close();
        },
        opt(option) {
            let o = JSON.parse(JSON.stringify(option));
            o.column = [...option.column, ...option.afterColumn];
            o.header = false;
            o.selection = false;
            return o;
        },

        /*
        * 查询继承的接口
        * */
        getExtends() {
            let {parentId} = this.allFormData();
            let item = {};
            let treePath = "";
            this.parentIdList().forEach(i => {
                if (i.oid === parentId) {
                    item = i;
                }
            })
            if (item.treePath) {
                treePath = item.treePath + ","
            }
            treePath += item.oid;
            common.getExtendsList({treePath: treePath}, this.temp).then(res => {
                this.data = res.data.data;
            })
        },
        getTabData() {
            return {form: this.tableList, flag: true}
        },
        setTabData() {
        },
    },
    watch: {
        show: {
            handler(v) {
                if (v) {
                    const {implInterfaces, step2, saveStep2} = this.allFormData();
                    this.tableList = !saveStep2 ? (implInterfaces ? implInterfaces : []) : (step2 ? step2 : []);
                    this.getExtends();
                }
            },
            immediate: true,
            deep: true
        }
    }
}
</script>

<style scoped>

</style>
